<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线写作系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">在线写作系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="javascript:;" id="logout">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="/user/index">用户管理</a></li>
                <li class="layui-nav-item"><a href="/article/index">作品管理</a></li>
                <li class="layui-nav-item"><a href="/discuss/index">讨论区管理</a></li>
                <li class="layui-nav-item"><a href="/message/index">意见反馈列表</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md2">
                    <input type="text" name="search" id="searchValue" placeholder="请输入关键字" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-col-md2">
                    <button type="button" class="layui-btn" id="search">查询</button>
                </div>
            </div>
            <table class="layui-hide" id="message" lay-filter="message"></table>
            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
                </div>
            </script>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © 在线写作管理系统
    </div>
</div>
</body>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['table','layer'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;

        table.render({
            elem: '#message'
            ,url:'/message/list'
            ,toolbar: '#toolbar'
            ,where: { //设定异步数据接口的额外参数，任意设
                param:{search: $("#searchValue").val()}
            }
            ,cols: [[
                {type:'checkbox'}
                ,{field:'detail', width:180, title: '意见/建议'}
                ,{field:'createBy', width:180, title: '提交人'}
                ,{field:'createTime', width:280, title: '创建时间'}
            ]]
            ,page: true
        });

        //监听表格头部工具条
        table.on('toolbar(message)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'delete':
                    if (checkStatus.data.length>0){
                        let ids = [];
                        layer.confirm('是否删除选中数据', function(index){
                            checkStatus.data.forEach(item=>{
                                ids.push(item.id)
                            })
                            $.ajax({
                                url:"/message/deleteByIds",
                                type:"POST",
                                dataType:"json",
                                data:{'ids':ids},
                                traditional:true,
                                success:function (res){
                                    if (res.code==='1'){
                                        layer.msg(res.message,function (){
                                            tableReload()
                                        },2000);
                                        layer.close(index);
                                    }else {
                                        layer.msg(res.message);
                                    }
                                }
                            })
                        });
                    }
                    break;
            }
        });

        function tableReload(){
            table.reload('message', {
                where: { //设定异步数据接口的额外参数，任意设
                    param:{search: $("#searchValue").val()}
                }
                ,page: {
                    page: 1 //重新从第 1 页开始
                }
            })
        }

        $("#search").click(function (){
          tableReload();
        })

        $("#logout").click(function (){
            $.ajax({
                url:"/user/logout",
                type:"POST",
                dataType:"json",
                success:function (res){
                    location.reload()
                }
            })
        })
    });
</script>
</html>
